<template>
  <div class="news">
    <div class="title">
      <ul>
        <li v-for="n in news" :key="n.id">
          <RouterLink
            :to="`/news/detail?id=${n.id}&title=${n.title}&content=${n.content}`"
            :key="n.id"
            >{{ n.title }}</RouterLink
          >
        </li>
      </ul>
      <ul>
        <li v-for="n in news" :key="n.id">
          <RouterLink
            active-class="active"
            :to="`/news/detail2/${n.id}/${n.title}/${n.content}`"
            :key="n.id"
            >{{ n.title }}</RouterLink
          >
        </li>
      </ul>
      <ul>
        <li v-for="n in news" :key="n.id">
          <a @click="toRoute(n)">{{ n.title }}</a>
        </li>
      </ul>
    </div>

    <div class="content">
      <RouterView />
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const news = reactive([
  { id: 1, title: '拉格沃克-夏尔-米哈伊尔', content: '我是米沙，是钟表匠' },
  { id: 2, title: '加拉赫', content: '朋友们，请享用吧' },
  { id: 3, title: '雷电-忘川守-芽依', content: '黄泉，雷电将军' }
])
const toRoute = (query: any) => {
  router.push({ name: 'detail3', query })
}
</script>

<style>
.active {
  color: black;
}
@media (min-width: 1024px) {
  .news {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  .news li {
    cursor: pointer;
  }
  .content {
    border: 1px solid ren;
  }
}
</style>
